<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤器</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // $(':contains("你吃饭了吗")').css('color','red');//contains前面什么也没有 表示全局的 都会查找到
            // $('div:contains("你吃饭了吗")').css('color','red');//表示div下的contains 这个精确一点点

            // $(':empty').css('background','gray').css('height','20px');//在全局里找 不包含任何子元素或文本
            // $('div:empty').css('background','gray').css('height','20px');//在div中找没有任何子元素或文本的元素

            // $('div:parent').css('background','gray').css('height','20px');//选取div中含有子元素或文本的元素
            // $('p').parent().css('background','gray').css('height','20px');//子元素存在父节点
            // $('li').parent().css('background','gray');

            // $('P').parents().css('background','gray');//表示查询p的直系亲属
            $('p').parentsUntil('body').css('height','40px').css('background','red');//查询p元素的直系亲属直到body为止

            // $('ul:has(.red)' ).css('background','gray');//含有某个特定类的父元素  has前面是父元素 第一种实现方式
            // $('ul').has('.red').css('background','gray');//jquery提供的方法  第二种实现方式

        });
    </script>
</head>
<body>
    <script>
    /* 内容过滤器 主要是对子元素，以及文本内容进行操作，DOM元素对象
    *           1.$(':contains("文本内容")')选取含有“文本内容”的元素
    *           2.$(':empty') 选取不包含子元素或者空文本的元素
    *           3.$(':parent') 选取含有子元素或者文本的元素
    *           4.$(':has(.red)') 选取含有class是red的元素
    *   提供的方法:
    *           1.$('ul').has('.red')跟$('ul:has(.red)')一样
    *           2.$('p').parent() 查询p元素的父节点
    *           3.$('P').parents() 查询p元素的直系亲属
    *           4.$('p').parentsUntil('body') 查询p元素的直系亲属直到body为止
    *
    * */
    </script>
    <div>你吃饭了吗</div>
    <div>文本内容2</div>
    <div></div>
    <div><p></p></div>
    <ul>
        <li>标签</li>
        <li>标签</li>
        <li class="red">标签</li>
    </ul>
    <ul>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
    </ul>
</body>
</html>